<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动态生成表格</title>
    <style>
        table {
            margin: 0px auto;
            border-collapse: collapse;
        }

        th {
            width: 100px;
            text-align: center;
            background-color: pink;
        }

        td {

            text-align: center;
        }
    </style>
</head>

<body>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        //先准备好学生的数据
        var datas = [{
            name: '邓佳杰',
            subject: 'javascript',
            sc: '100'
        }, {
            name: '邓佳',
            subject: 'javascript',
            sc: '100'
        }, {
            name: '邓',
            subject: 'javascript',
            sc: '100'
        }, {
            name: '邓jj',
            subject: 'javascript',
            sc: '100'
        }];   
        var tb = document.querySelector('tbody')
        for (var i = 0;i< datas.length; i++) {
            //创建tr行
            var tr = document.createElement('tr')
            tb.appendChild(tr)
                 //创建行内单元格
                 //遍历数组里面的对象
                 for(var k in datas[i]){
                     //创建单元格
                     var td=document.createElement('td')
                     //把对象的属性值给td
                     td.innerHTML=datas[i][k]
                     tr.appendChild(td)
                 }
                 var td=document.createElement('td')
                 td.innerHTML='<a href="javascript:;">删除</a>'
                 tr.appendChild(td)
        }
        var as=document.querySelectorAll('a')
        var tbody=document.querySelector('tbody')
        for(var i=0;i<as.length;i++){
            as[i].onclick=function(){
                //点击a进行删除
                tbody.removeChild(this.parentNode.parentNode)
            }
        }
    </script>
</body>

</html>